<template>
	<view>
		<view class="wrapper">
			<view class="address-wrapper" @click="goto('/pages/mine/addressOrderCg?no=' + no)">
				<image class="img" src="../../static/images/pos.png" mode="aspectFill"></image>
				<view class="right">
					<view class="row">
						<view class="name">
							{{receive_name}}
						</view>
						<view class="tel">
							{{mobile}}
						</view>
					</view>
					<view class="address">
						{{address}}
					</view>
				</view>
				<image class="img right" src="../../static/images/next.png" mode="aspectFill"></image>
			</view>

			<my-shopcard v-for="i in goods" :key="i.id" :img="i.full_goods_pic" :name="i.goods_name" :number="i.num" :money="i.single_price"
			 :state="0"></my-shopcard>
		</view>

		<view class="padding">
			<radio-group class="block" @change="RadioChange">
				<view class="cu-form-group pay">
					<view class="title">选择支付方式</view>
				</view>
				<view class="cu-form-group pay">
					<view class="title">usdt {{coin_amount}}</view>
					<radio :class="radio=='usdt'?'checked':''" :checked="radio=='usdt'?true:false" value="usdt"></radio>
				</view>
				<view class="cu-form-group pay">
					<view class="title">epc {{epc_amount}}</view>
					<radio :class="radio=='epc'?'checked':''" :checked="radio=='epc'?true:false" value="epc"></radio>
				</view>
			</radio-group>
		</view>

		<u-keyboard default="778" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
		 v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 paymoney">
					<text>{{radio=='usdt' ? coin_amount : epc_amount}}</text>
					<text class="u-font-20 u-padding-left-10">{{radio}}</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="false"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>

		<view class="footer">
			<view class="cancel" @click="cancel">取消订单</view>
			<view class="right">
				<view class="text">合计：</view>
				<view class="money">{{radio=='usdt' ? coin_amount : epc_amount}}</view>
				<view class="btn" @click="showPop">支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: "",
				tab: "",
				goods: [],
				total_price: "",
				coin_amount: "",
				epc_amount: "",
				address: "",
				receive_name: "",
				mobile: "",
				show: false,
				radio: "usdt",
				password: ''
			};
		},
		onLoad(opt) {
			if (opt.no) {
				this.no = opt.no;
				this.getOrder(opt.no);
			}
			if (opt.tab) {
				this.tab = opt.tab;
			}
		},
		onShow() {
			this.show = false;
			this.getOrder(this.no);
		},
		methods: {
			RadioChange(e) {
				this.radio = e.detail.value;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				uni.showLoading({
					title: "支付中"
				});
				this.$u.post('/orders/pay', {
					pay_password: this.password,
					pay_type: this.radio,
					trade_no: this.no
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/shop/order'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			showPop(flag = true) {
				this.password = "";
				this.show = flag;
			},
			getOrder(no) {
				this.$u.get("/orders/detail?trade_no=" + no).then(res => {
					console.log(res);
					let data = res.data.result.order;
					this.goods = data.orders_detail;
					this.total_price = data.total_price;
					this.coin_amount = data.coin_amount;
					this.epc_amount = data.epc_amount;
					this.address = data.address;
					this.receive_name = data.receive_name;
					this.mobile = data.mobile;
					if (data.pay_type == 'transfer') {
						this.$u.route({
							type: 'navigateBack',
							delta: 2
						})
					}
				});
			},
			goto(path) {
				uni.navigateTo({
					url: path,
					animationType: "slide-in-right",
					animationDuration: 300
				});
			},
			cancel() {
				uni.showModal({
					title: "提示",
					content: "确定要取消该订单？",
					success: res => {
						if (res.confirm) {
							this.$u
								.post("/orders/cancel", {
									trade_no: this.no
								})
								.then(res => {
									uni.showToast({
										title: "操作成功",
										icon: "none"
									});
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/shop/order"
										});
									}, 1500);
								});
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.address-wrapper {
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		margin: 30rpx 0 60rpx 0;

		.img {
			width: 50rpx;
			height: 50rpx;
			display: block;
			margin-right: 30rpx;
			flex: 0 0 auto;

			&.right {
				margin-left: 30rpx;
				margin-right: 0;
			}
		}

		.row {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;
			font-size: 34rpx;
		}

		.name {
			max-width: 300rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			letter-spacing: 2rpx;
		}
	}

	.info-wrapper {
		margin-top: 60rpx;

		.info {
			margin-top: 10rpx;
			letter-spacing: 2rpx;
			font-size: 28rpx;
		}

		.light {
			color: #fff;
		}
	}

	.footer {
		background: #404457;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #a0a1ab;

		.cancel {
			font-size: 26rpx;
			color: #fff;
			margin-left: 40rpx;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100%;
		}

		.money {
			color: #00da8a;
			margin-right: 20rpx;
		}

		.btn {
			color: #fff;
			padding: 0 60rpx;
			background: #00d388;
			height: 100%;
			display: flex;
			align-items: center;
		}
	}

	.pay {
		background: #141439;
		color: #fff;
	}

	.cu-form-group+.cu-form-group {
		border: none;
	}

	.paymoney {
		font-size: 50rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}
</style>
